<template>
  <div class="content">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>导图列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider>非会员上限免费创建6条，会员上限免费创建50条</el-divider>
    <el-row class="btn"><el-button type="primary" plain @click="onCreat('add')">创建思维导图</el-button></el-row>
    <el-row v-if="mapList.length===0">暂未存在思维导图，请先创建。</el-row>
    <div class='main'>
      <div  class="item" v-for="(item, idx) in mapList" :key="idx" :offset="idx > 0 ? 2 : 0">
        <el-card :body-style="{ padding: '0px' }">
          <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
          <div style="padding: 14px;">
            <span>{{item.title}}</span>
            <div class="bottom clearfix">
              <time class="time">{{ item.createTime }}</time>
              <div class="bottomOS">
              <el-button type="text" class="button" @click="onCreat('read',item,idx)">查看</el-button>
              <el-button type="text" class="button" @click="onCreat('edit',item,idx)">修改</el-button>
              <el-button type="text" class="button" @click="onDelete(item,idx)">删除</el-button>

              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "mapList",
  data() {
    return {
      userInfo: JSON.parse(sessionStorage.getItem('user')) || null,
      loading:false,
      isChange:false,
      timer:null,
      mapList:[],
      form:{}
    };
  },
  created() {
    this.getList()
  },
  methods: {
    toLogin() {
      this.$emit('toLogin')
    },
    done(){},
    // 创建/修改/查看导图
    onCreat(type,row,idx){
      this.$router.push({
        name:'map',
      query:{
        type:type?type:null,
        ...row
      }
    })
    },
     // 获取导图列表
     getList(){
      this.$api.getMapList({id:this.$route.query.id}).then((res) => {
        console.log(res);
        if (res.code === 200) {
          this.mapList = res.data
        } else {
              this.$message.error(res.msg);
            }
          });
    },
    // 删除导图
    onDelete(row,index){
      this.$api.delMapById({id:row.mapId}).then((res) => {
        console.log(res);
        if (res.code === 200) {
          this.getList()
        } else {
              this.$message.error(res.msg);
            }
          });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 80%;
  padding: 50px 0;
  margin: 0 auto;
  .btn  {
    margin: 20px;
  }
  .main {
    display: grid;
    // grid-template-columns: repeat(6, 1fr);
    grid-template-columns: repeat(6, minmax(100px, 1fr));
    grid-gap: 30px;
  }
}
.time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
    .bottomOS {
          display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 0;
    }
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
</style>
